<template>
  <div class="">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">档案表</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/itemLists">档案管理</a></el-breadcrumb-item>
      <!-- <el-breadcrumb-item>档案室</el-breadcrumb-item> -->
    </el-breadcrumb>
    <el-main>
        <el-button
        style="margin-bottom: 5px; float: right"
        type="success"
        @click="exportExcel"
        round
        size="mini"
        >导出Excel</el-button
      >
      <el-button
        style="margin-bottom: 5px;"
        type="primary"
        @click="pigeonhole"
        round
        size="mini"
        >信息归档</el-button
      >
      <el-table :data="items" id="out-table" height="350" border style="width: 100%;">
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="onSale" label="性别">
          <template scope="scope">
            {{ scope.row.onSale ? "男" : "女" }}
            <!-- <el-switch
                active-text="男"
                inactive-text="女"
                disabled
                active-color="#5B7BFA"
                inactive-color="#dadde5"
                v-model="scope.row.onSale"
              >
              </el-switch> -->
          </template>
        </el-table-column>
        <el-table-column label="出生日期">
          <template scope="scope">
            {{ getTime(scope.row.createat) }}
          </template>
        </el-table-column>
        <el-table-column label="个人简介">
          <template scope="scope">
            <el-tooltip placement="top">
              <div style=" width: 200px;" slot="content">{{ scope.row.desc }}</div>
              <div>{{ scope.row.desc.substr(0, 5) + "..." }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="代号">
          <template scope="scope">
            {{
              scope.row.price > 200
                ? scope.row.price > 300
                  ? "狼王" + scope.row.price
                  : "孤狼" + scope.row.price
                : "小狼崽" + scope.row.price
            }}
          </template>
        </el-table-column>
        <el-table-column prop="thumb" label="照片">
          <template scope="scope">
            <img :src="scope.row.thumb" width="100" height="100" />
          </template>
        </el-table-column>
        <el-table-column width="150" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row.id)"
              >编辑</el-button
            >
            <!-- <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.id)"
                  >删除</el-button
              > -->
            <el-popconfirm
              confirm-button-text="好的"
              cancel-button-text="不用了"
              @confirm="handleDelete(scope.row.id)"
              icon="el-icon-info"
              icon-color="red"
              title="确定删除吗？"
            >
              <el-button size="mini" type="danger" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block" style="margin-top: 15px">
        <el-pagination
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-main>
  </div>
</template>

<script>
// 引入导出Excel表格依赖
// import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import { getitemlists, delItem } from '../../api/index'
import dayjs from 'dayjs'
export default {
  data () {
    return {
      items: [],
      isshow: true,
      total: 0,
      pageSize: 10,
      currentPage: 1
    }
  },
  created () {
    this.getitem()
  },
  methods: {
    // 定义导出Excel表格事件
    exportExcel () {
      const data = [
      // 代表导出的标题 按items数据给的 不是表格数据
        ['id', '姓名', '代号', '年龄', '未知', '个人简介', '性别', '出生日期', '照片']
      ]
      this.items.forEach(item => {
        data.push(Object.values(item))
      })
      const ws = XLSX.utils.aoa_to_sheet(data)
      const wb = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(wb, ws, 'SheetJS')
      /* generate XLSX file and send to client */
      XLSX.writeFile(wb, 'sheetjs.xlsx')
    },
    // 初始数据
    getitem () {
      getitemlists().then((res) => {
        console.log(res.data.data)
        this.items = res.data.data.lists
        this.total = res.data.data.total
      })
    },
    // 修改时间戳
    getTime (time) {
      return dayjs(time).format('YYYY-MM-DD')
    },
    // 每页数据改变了
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
      this.getitem()
    },
    // 页码变化触发的函数 两个参数分别是当前页数和每页条数
    handleCurrentChange (page) {
      this.page = page
      this.getitem()
    },
    // 新增
    pigeonhole () {
      this.$router.push('/itemAdd')
    },
    // 编辑
    handleEdit (id) {
      this.$router.push({
        path: '/itemUpdate',
        query: {
          id
        }
      })
    },
    handleDelete (id) {
      delItem(id).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 1500,
            // 关闭的回调 也就是让他去列表页
            onClose: () => this.getitem()
          })
        }
      })
    }
  }
}
</script>
<style scoped>
.el-button{
margin: 1px;
}
</style>
